import React from 'react';
import { useModel,history  } from 'umi';
import { useState, useEffect } from 'react'
import style from '../index.less'
interface URa {
  id: string,
  name: any
}
export default () => {
  let [list, setList] = useState([])
  let [rlist, setright] = useState([])
  let [rlistfot, setrightfot] = useState([])
  const [inde, setindex] = useState(0)
  let { getlassify, getRightify } = useModel('classify', model => ({ getlassify: model.getlassify, getRightify: model.getRightify }));
  async function fetchData() {
    const result: any = await getlassify()
    setList(result.data.categoryList);
  };
  useEffect(() => {
    fetchData()
  }, [getlassify]);
  async function tablist(id: URa,index:number) {
    const result = await getRightify(id)
    setright(result.data.currentCategory)
    setrightfot(result.data.currentCategory.subCategoryList)
    setindex(index)
  }
  async function tz(id:any) {
    history.push(`/detail/${id}`)
  }
  function tzinp() {
    history.push(`/detailx/id`)
  }
  return (
    <div className={style.classifybox}>
      <div className={style.inp}>
        <input type="text" onClick={()=>tzinp()} placeholder='请输入要搜索的内容' name="" id="" />
      </div>
      
      <div className={style.classbox}>
        <div className={style.classifyleft}>
          {
            (list as unknown as any).map((item: any, index: number) => {
              return (
                <ul key={index}>
                  <li onClick={() => tablist(item.id,index)} className={inde===index?style.ac:''}>{item.name}</li>
                </ul>
              )
            })
          }
        </div>
        <div className={style.classifyright}>
          <div className={style.classtabtop}>
            <p><img src={rlist.banner_url} alt="" /></p>
            <p>{rlist.name}</p>
          </div> 
          <div  className={style.classtabfoot}>
          {
            (rlistfot as unknown as any).map((item: any, index: number) => {


              return (
                
                  <dl key={index} onClick={()=>{tz(item.id)}}>
                    <dt>
                      <img src={item.wap_banner_url} alt="" />
                    </dt>
                    <dd>{item.name}</dd>
                  </dl>
              )
            })
          }
          </div>
        </div>

      </div>

    </div>
  );
}
